<template>
    <div class="product-list">
        <ul class="search-bar">
            <li class="form-item">
                <p class="item-title">产品名称:</p>
                <el-input size="small" v-model="params.productName" placeholder="请输入产品名称"/>
            </li>
            <li class="form-item">
                <p class="item-title">产品编号:</p>
                <el-input size="small" v-model="params.productSeq" placeholder="请输入产品编号"/>
            </li>
            <li class="form-item">
                <p class="item-title">发行单位:</p>
                <el-input size="small" v-model="params.issuerName" placeholder="请输入发行单位"/>
            </li>
            <li class="form-item">
                <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
                <el-button class="rest-btn" size="small" @click="handleReset">重置</el-button>
            </li>
        </ul>
        <div class="button-group">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="addClick" v-if="buttons[$buttonCode.add]">添加</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteClick" v-if="buttons[$buttonCode.del]">删除</el-button>
        </div>
<!--        <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="productName" label="产品名称"></el-table-column>
            <el-table-column prop="productSeq" label="产品编号" width="180"></el-table-column>
            <el-table-column label="发行单位">
                <el-table-column prop="issuerName" label="发行机构名称" width="120"></el-table-column>
                <el-table-column label="托管账户信息">
                    <el-table-column prop="issuerAccountName" label="户名"></el-table-column>
                    <el-table-column prop="issuerAccountBank" label="开户行" width="180"></el-table-column>
                    <el-table-column prop="issuerAccountSeq" label="帐号" width="120"></el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column prop="productSeq" label="产品风险等级" width="120"></el-table-column>
            <el-table-column prop="productUnitPrice" label="产品单价" width="120"></el-table-column>
            <el-table-column prop="maxAmountRaised" label="最高募集金额" width="120"></el-table-column>
            <el-table-column prop="individualIncrement" label="个人递增金额" width="120"></el-table-column>
            <el-table-column prop="maximumAmount" label="个人上限金额" width="120"></el-table-column>
            <el-table-column prop="frozenAmount" label="冻结金额" width="120"></el-table-column>
            <el-table-column prop="raiseStartDate" label="募集开始日期" width="120"></el-table-column>
            <el-table-column prop="raiseEndDate" label="募集结束日期" width="120"></el-table-column>
            <el-table-column prop="productTerm" label="产品期限" width="120"></el-table-column>
            <el-table-column prop="interestStartDate" label="起息日期" width="120"></el-table-column>
            <el-table-column prop="expireDate" label="到期日期" width="120"></el-table-column>
        </el-table>
        <el-pagination
            background
            :current-page="page"
            :page-size="$pageSize"
            layout="prev, pager, next"
            :total="total"
            @current-change="goPage"
        ></el-pagination>-->
        <table-data
            :headerData="headerData"
            :tableData="tableData"
            :selectionObj="selectionObj"
            :operatingObj="operatingObj"
            :total="total"
            :page="page"
            @update:page="goPage"
            @selection-change="handleSelectionChange"
            @view="tableView"
            @edit="tableEdit"
            @remove="tableRemove"
        ></table-data>
    </div>
</template>

<script>
import {getProductList} from '@/api/product';
import mixin from '@/mixins/buttons'

export default {
    name: 'allProduct',
    mixins: [mixin],
    data() {
        return {
            btnData: [
                {
                    icon: 'el-icon-plus',
                    type: 'primary',
                    text: '添加',
                    disabled: false,
                    eventName: 'add',
                },
                {
                    icon: 'el-icon-delete',
                    type: 'danger',
                    text: '删除',
                    eventName: 'delete',
                },
            ],
            headerData: [
                {
                    prop: 'productName',
                    label: '产品名称',
                },
                {
                    prop: 'productSeq',
                    label: '产品编号',
                    width: 180,
                },
                {
                    label: '发行单位',
                    children: [
                        {
                            prop: 'issuerName',
                            label: '发行机构名称',
                            width: 120,
                        },
                        {
                            label: '托管账户信息',
                            children: [
                                {
                                    prop: 'issuerAccountName',
                                    label: '户名',
                                },
                                {
                                    prop: 'issuerAccountBank',
                                    label: '开户行',
                                    width: 180,
                                },
                                {
                                    prop: 'issuerAccountSeq',
                                    label: '账号',
                                    width: 120,
                                },
                            ],
                        },
                    ],
                },
                {
                    prop: 'productRiskLevel',
                    label: '产品风险等级',
                    width: 120,
                },
                {
                    prop: 'productUnitPrice',
                    label: '产品单价',
                    width: 120,
                },
                {
                    prop: 'maxAmountRaised',
                    label: '最高募集金额',
                    width: 120,
                },
                {
                    prop: 'individualIncrement',
                    label: '个人递增金额',
                    width: 120,
                },
                {
                    prop: 'maximumAmount',
                    label: '个人上限金额',
                    width: 120,
                },
                {
                    prop: 'frozenAmount',
                    label: '冻结金额',
                    width: 120,
                },
                {
                    prop: 'raiseStartDate',
                    label: '募集开始日期',
                    width: 120,
                },
                {
                    prop: 'raiseEndDate',
                    label: '募集结束日期',
                    width: 120,
                },
                {
                    prop: 'productTerm',
                    label: '产品期限',
                    width: 100,
                },
                {
                    prop: 'interestStartDate',
                    label: '起息日期',
                    width: 120,
                },
                {
                    prop: 'expireDate',
                    label: '到期日期',
                    width: 120,
                },
                {
                    label: '业绩比较基准',
                    children: [
                        {
                            label: '一档',
                            children: [
                                {
                                    prop: 'performanceBenchmarkAmount1',
                                    label: '认购金额',
                                    width: 120,
                                },
                                {
                                    prop: 'performanceBenchmarkYield1',
                                    label: '收益率',
                                    width: 120,
                                },
                            ],
                        },
                        {
                            label: '二档',
                            children: [
                                {
                                    prop: 'performanceBenchmarkAmount2',
                                    label: '认购金额',
                                    width: 120,
                                },
                                {
                                    prop: 'performanceBenchmarkYield2',
                                    label: '收益率',
                                    width: 120,
                                },
                            ],
                        },
                        {
                            label: '三档',
                            children: [
                                {
                                    prop: 'performanceBenchmarkAmount3',
                                    label: '认购金额',
                                    width: 120,
                                },
                                {
                                    prop: 'performanceBenchmarkYield3',
                                    label: '收益率',
                                    width: 120,
                                },
                            ],
                        },
                    ],
                },
                {
                    label: '代销手续费率',
                    children: [
                        {
                            label: '一档',
                            children: [
                                {
                                    prop: 'commissionRateAmount1',
                                    label: '认购金额',
                                    width: 120,
                                },
                                {
                                    prop: 'commissionRateYield1',
                                    label: '收益率',
                                    width: 120,
                                },
                            ],
                        },
                        {
                            label: '二档',
                            children: [
                                {
                                    prop: 'commissionRateAmount2',
                                    label: '认购金额',
                                    width: 120,
                                },
                                {
                                    prop: 'commissionRateYield2',
                                    label: '收益率',
                                    width: 120,
                                },
                            ],
                        },
                        {
                            label: '三档',
                            children: [
                                {
                                    prop: 'commissionRateAmount3',
                                    label: '认购金额',
                                    width: 120,
                                },
                                {
                                    prop: 'commissionRateYield3',
                                    label: '收益率',
                                    width: 120,
                                },
                            ],
                        },
                    ],
                },
                {
                    prop: 'customerRiskLevel',
                    label: '适用客户风险等级',
                    width: 120,
                },
                {
                    prop: 'salesObject',
                    label: '销售对象',
                    width: 120,
                },
                {
                    prop: 'exitSign',
                    label: '退出标志',
                    width: 120,
                },
                {
                    prop: 'productStatus',
                    label: '产品状态',
                    width: 120,
                },
                {
                    label: '实收代理费',
                    children: [
                        {
                            label: '付款方账户信息',
                            children: [
                                {
                                    prop: 'payAccountName',
                                    label: '户名',
                                    width: 120,
                                },
                                {
                                    prop: 'payAccountBank',
                                    label: '开户行',
                                    width: 120,
                                },
                                {
                                    prop: 'payAccountNo',
                                    label: '账号',
                                    width: 120,
                                },
                            ],
                        },
                        {
                            label: '我行中收专户信息',
                            children: [
                                {
                                    prop: 'ownAccountName',
                                    label: '户名',
                                    width: 120,
                                },
                                {
                                    prop: 'ownAccountBank',
                                    label: '开户行',
                                    width: 120,
                                },
                                {
                                    prop: 'ownAccountNo',
                                    label: '账号',
                                    width: 120,
                                },
                            ],
                        },
                        {
                            prop: 'paidFee',
                            label: '实收金额',
                            width: 180,
                        },
                        {
                            prop: 'payDate',
                            label: '到账日期',
                            width: 120,
                        },
                        {
                            prop: 'payStartDate',
                            label: '对应收费时间段',
                            width: 120,
                        },
                        {
                            prop: 'note',
                            label: '备注',
                            width: 400,
                        },
                    ],
                },
                {
                    prop: 'productType',
                    label: '产品类型',
                    width: 120,
                },
            ],
            tableData: [],
            selectionObj: {
                type: 'selection',
            },
            operatingObj: {
                fixed: 'right',
                width: '150',
                btnList: [
                    {
                        text: '删除',
                        eventName: 'remove',
                    },
                    {
                        text: '编辑',
                        eventName: 'edit',
                    },
                    {
                        text: '查看详情',
                        eventName: 'view',
                    },
                ],
            },
            dialogVisible: false,
            params: {
                productName: '',
                productSeq: '',
                issuerName: '',
            },
            query: {},
            page: 1,
            total: 0,
            productStatuses: {
                0: '未审核',
                1: '审核通过',
                2: '审核拒绝',
            },
            // 查询列表类型
            listType: '',
        };
    },
    watch: {
        dialogVisible(val) {
            console.log('val========', val);
        },
        $route(to) {
            this.listType = to.meta.type;
            this.handleReset();
        },
    },
    created() {
        this.listType = this.$route.meta.type;
        this.getProductList();
    },
    methods: {
        // 获取产品列表
        getProductList() {
            getProductList({
                currentPage: this.page,
                pageSize: this.$pageSize,
                productStatus: this.listType,
                ...this.query,
            }).then(({data}) => {
                const {list, totalCount} = data;
                this.tableData = list.map(item => {
                    item.productStatus = this.productStatuses[item.productStatus];
                    return item;
                });
                this.total = totalCount;
            }).catch(err => {
                this.tableData = [];
                this.total = 0;
            });
        },
        // 分页切换
        goPage(page) {
            this.page = page;
            this.getProductList();
        },
        // 搜索
        handleSearch() {
            this.query = {...this.params};
            this.page = 1;
            this.getProductList();
        },
        // 重置搜索
        handleReset() {
            this.params = {
                productName: '',
                productSeq: '',
                issuerName: '',
            };
            this.handleSearch();
        },
        handleSelectionChange(arr) {
            this.btnData[0].disabled = arr.length === this.tableData.length;
            console.log('obj====', arr);
        },
        addClick() {
            this.$router.push({name: 'productAdd'});
        },
        deleteClick() {
            this.dialogVisible = true;
            console.log('删除');
        },
        tableView(item) {
            this.$router.push({name: 'productView', params: {id: item.id}});
        },
        tableEdit(item) {
            this.$router.push({name: 'productEdit', params: {id: item.id}});
        },
        tableRemove(obj) {
            console.log('删除');
            console.log('obj=========', obj);
            this.dialogVisible = true;
        },

        handleConfirm() {
            // this.$message({
            //   message: '删除成功！',
            //   type: 'success'
            // })
            this.dialogVisible = false;
        },
    },
};
</script>

<style scoped lang="less">
.product-list{
    .rest-btn{
        color: #fff;
        background: rgba(242, 229, 26, 1);
        border: 0;
    }
    .rest-btn:hover{
        color: #fff;
        background: rgba(242, 229, 26, 0.6);
    }
}
</style>
